<template>
  <div>
      <span v-if="loading">loading....</span>
      <img v-if="loaded" :src="result.message" alt="">
      <div>
          <button @click="reflash">刷新</button>
      </div>
      <img :src="a?.message" alt="">
  </div>
</template>

<script>

/* ==========hook，封装请求========= */

import {ref} from 'vue'
import useULRLoader from './hooks/useURLLoader.ts'
export default {
    setup() {
        let url = 'https://dog.ceo/api/breed/pug/images/random'
        let a = ref(null)
        let {result,loading,loaded} = useULRLoader(url)
        //刷新操作
        a = result
        console.log('a====',a)
        const reflash = ()=> {
            // let {result,loading,loaded}=  useULRLoader(url)
            // console.log('刷新数据：',result)
            // a = result
            location.reload();
        }
        return {
            result,
            loading,
            loaded,
            reflash,
            a
        }

    }
}
</script>

<style>

</style>